<template>
	<view class="wrap">
		<u-swiper :list="slidesList"></u-swiper>
		<view class="u-m-t-20">
			<u-tabs bar-width="100" item-width="100" active-color="#f03d37" :list="tabsList" :is-scroll="false" :current="currentTabs" @change="changeTabs"></u-tabs>
		</view>
		<view class="">
			<u-row gutter="16">
				<u-col span="6" v-for="i in 12">
					<navigator url="" class="goods_item">
						<u-image width="100%" height="300rpx" :src="goodsImageUrl"></u-image>
						<view class="title u-flex u-row-center u-line-1">现代汉语词典</view>
						<view class="u-flex u-row-between">
							<view class="price">￥99</view>
							<view class="sales">销量：10</view>
						</view>
					</navigator>
				</u-col>
			</u-row>
			
			<u-loading mode="circle"></u-loading>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				slidesList: [
					'http://img60.ddimg.cn/2021/11/5/20211105174945993.jpg',
					'http://img60.ddimg.cn/upload_img/00316/by/750x315-1635929711.jpg'
				],
				tabsList: [
					{
						name: '默认',
						count: 5
					},
					{
						name: '销量'
					},
					{
						name: '推荐'
					},
					{
						name: '最新'
					}
				],
				currentTabs: 0,
				goodsImageUrl: 'https://i.loli.net/2021/11/03/kqTDNQh6z3jVSRc.jpg'
			}
		},
		async onLoad() {

		},
		methods: {
			changeTabs(index){
				this.currentTabs = index;
			}
		},
		onReachBottom() {
			
			
			console.log(1);
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 40rpx;
	}
	.goods_item{
		padding: 40rpx;
		margin-top: 30rpx;
		box-shadow: 0 12rpx 12rpx 0 rgba($color: #000000, $alpha: 0.1);
		.title{
			margin: 20rpx 0;
			font-weight: 500;
			font-size: 32rpx;
		}
		.price{
			color: #ef0053;
		}
		.sales{
			color: #82848A;
		}
	}
</style>
